import { useState } from 'react';
import { Form, Row, Col, Radio, Input, TreeSelect, Select } from 'antd';

interface IProps {
  type?: 'add' | 'edit' | 'check';
  role?: string;
}

const BasicForm: React.FC<IProps> = (props) => {
  // 组织架构
  const [departmentTree] = useState([]);
  //行业
  const [industrySelect] = useState<Array<any>>([]);
  const [form] = Form.useForm();

  const view = props.type === 'edit';
  return (
    <Form form={form}>
      <Row gutter={24}>
        <Col xs={24} sm={12}>
          <Form.Item name="type" label="节点类型" rules={[{ required: true }]}>
            <Radio.Group>
              <Radio value={2}>部门</Radio>
              <Radio value={1}>公司</Radio>
            </Radio.Group>
          </Form.Item>
        </Col>

        {
          // 编辑或详情展示机构编码
          props.type !== 'add' && (
            <Col xs={24} sm={12}>
              <Form.Item name="serialNo" label="机构编码">
                <Input disabled />
              </Form.Item>
            </Col>
          )
        }

        <Col xs={24} sm={12}>
          <Form.Item name="shortName" label="简称">
            <Input placeholder="请输入简称" disabled={view} />
          </Form.Item>
        </Col>

        <Col xs={24} sm={12}>
          <Form.Item
            name="父级节点"
            label="parentId"
            rules={[{ required: true }]}
          >
            <TreeSelect treeData={departmentTree} disabled={view} />
          </Form.Item>
        </Col>

        <Col xs={24} sm={12}>
          <Form.Item label="联系方式" name="phone">
            <Input placeholder="请输入联系方式" disabled={view} />
          </Form.Item>
        </Col>

        <Col xs={24} sm={12}>
          <Form.Item label="机构名称" name="name" rules={[{ required: true }]}>
            <Input placeholder="请输入机构名称" disabled={view} />
          </Form.Item>
        </Col>

        <Col xs={24} sm={12}>
          <Form.Item
            label="行业"
            name="industryType"
            rules={[{ required: true }]}
          >
            <Select placeholder="请选择行业" disabled={view}>
              {industrySelect.map((item) => (
                <Select.Option key={item.dictValue} value={+item.dictValue}>
                  {item.dictLabel}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Col>

        <Col xs={24} sm={12}>
          <Form.Item label="机构英文名称" name="nameEn">
            <Input placeholder="请输入机构英文名称" disabled={view} />
          </Form.Item>
        </Col>

        <Col xs={24} sm={12}>
          <Form.Item label="地址" name="address">
            <Input placeholder="请输入机构地址" disabled={view} />
          </Form.Item>
        </Col>

        <Col xs={24} sm={12}>
          <Form.Item label="负责人姓名" name="personInCharge">
            <Input placeholder="请输入机构负责人姓名" disabled={view} />
          </Form.Item>
        </Col>

        <Col xs={24} sm={12}>
          <Form.Item label="简介" name="introduction">
            <Input placeholder="请输入机构简介" disabled={view} />
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};

export default BasicForm;
